<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="../base/top.jsp" %>
    <%--<!-- 下拉框 -->--%>
    <%--<link rel="stylesheet" href="static/ace/css/chosen.css"/>--%>
    <%--<!-- 日期框 -->--%>
    <%--<link rel="stylesheet" href="static/ace/css/datepicker.css"/>--%>
    <script src="static/moment.js"></script>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content" style="width:80%; margin: auto;">
        <div class="main-content-inner">

            <div class="page-content">
                <div class="page-header" style="height:140px;">
                    <p style="text-align: center; line-height: 80px; font-size: 30px; color: #6FAED9;" >软工教务系统</p>
                    <table style="margin-top:5px;" width="100%">
                        <tbody>
                        <tr>
                            <td></td>
                            <td style="vertical-align:top;padding-left:2px;float: right;"><a class="btn btn-light btn-xs" onclick="tosearch();" title="检索"><i id="nav-search-icon" class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i></a></td>
                            <td style="float:right;">
                                <div class="nav-search">
                                    <span class="input-icon">
                                        <input type="text" placeholder="这里输入关键词" class="nav-search-input" id="nav-search-input" autocomplete="off" name="keywords" value="">
                                        <i class="ace-icon fa fa-search nav-search-icon"></i>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- 检索  -->
                        <form action="fhbutton/list.do" method="post" name="Form" id="Form">
                            <p id="project-id" style="display: none">${projectStageDetail.projectId}</p>
                            <div  class="table-header" style="height: 40px"></div>
                            <!-- 检索  -->
                            <table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top:5px;">
                                <thead>

                                <tr>
                                    <th class="center" style="width:50px;">序号</th>
                                    <th class="center" style="width:100px;">阶段</th>
                                    <th class="center">开始时间</th>
                                    <th class="center">结束时间</th>
                                    <th class="center">文档版本个数</th>
                                    <th class="center">分数</th>
                                    <th class="center" style="width:80px;">状态</th>
                                    <th class="center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${projectStageDetail.stageCompleteDetailList}" var="stageDetail" varStatus="vs">
                                <tr>
                                    <td class="center" style="width: 30px;">${vs.count}</td>
                                    <td class="center" style="width: 200px;">${stageDetail.stageName}</td>
                                    <td class="center">${stageDetail.stageStartTime}</td>
                                    <td class="center">${stageDetail.stageEndTime}</td>
                                    <td class="center">${stageDetail.countAssignment}</td>
                                    <td class="center" style="width: 300px">
                                        <div class="grade">
                                             ${stageDetail.stageGrade}
                                        </div>
                                        <div class="form-group input-grade hide">
                                            <label for="grade-input" style="float: left">评分：</label>
                                            <input style="float: left;width:100px " type="text" class="form-control input-sm" id="grade-input" value="${stageDetail.stageGrade}">
                                            <div style="width: 120px;float: right">
                                                <a style="float: left;margin-right: 5px;margin-left: 10px" id="${stageDetail.stageId}" class="btn btn-success btn-sm" onclick="changeToPass(this)">确定</a>
                                                <a style="float: left" class="btn btn-danger btn-sm" onclick="hideInputGrade(this)">取消</a>
                                            </div>
                                        </div>
                                    </td>
                                    <c:choose>
                                        <c:when test="${stageDetail.stageComplete == true}">
                                            <td class="center green">通过</td>
                                            <td>
                                                <a id="${stageDetail.stageId}"  class="btn btn-info btn-xs " title="关闭" onclick="changeToNotPass(this)">
                                                    <i class="ace-icon glyphicon glyphicon-off" title="关闭"></i>
                                                </a>
                                            </td>
                                        </c:when>
                                        <c:otherwise>
                                            <td class="center red">不通过</td>
                                            <td>
                                                <a id="${stageDetail.stageId}" class="btn btn-info btn-xs " title="启动" onclick="showInputGrade(this)">
                                                    <i class="ace-icon glyphicon glyphicon-play" title="通过"></i>
                                                </a>
                                            </td>
                                        </c:otherwise>
                                    </c:choose>
                                </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div>
<!-- 页面底部js¨ -->
<%@ include file="../base/foot.jsp" %>
<script type="text/javascript">
    //当需要修改状态为通过时，显示分数提示框
    function showInputGrade(button){
        var index = $(button).closest("tr").index()+1;
        $(".input-grade").addClass("hide");
        $(".grade").addClass("show");
        $("tbody tr:eq("+ index +") td:eq(5)").find("div.grade").removeClass("show");
        $("tbody tr:eq("+ index +") td:eq(5)").find("div.grade").addClass("hide");
        $("tbody tr:eq("+ index +") td:eq(5)").find("div.input-grade").removeClass("hide");
        //$("tbody tr:eq("+ index +") td:eq(5)").find(".input-grade").show();
    }
    function hideInputGrade(button) {
        var index = $(button).closest("tr").index()+1;
        $("tbody tr:eq("+ index +") td:eq(5)").find("div.grade").removeClass("hide");
        $("tbody tr:eq("+ index +") td:eq(5)").find("div.input-grade").addClass("hide");
    }
    //改变该阶段的状态为通过
    function changeToPass(button) {
        var grade = $(button).closest("tr").find("#grade-input").val();
        if(checkGradeFormates(grade)){
            changeStatu(button,grade);
        }
    }
    //改变该阶段的状态为不通过
    function changeToNotPass(button) {
        changeStatu(button,-1);
    }
    //改变阶段状态
    function changeStatu(button,grade) {

        if(!checkStageFormats(button,grade)){
            return;
        }
        var json = {
            projectId:$("#project-id").text(),
            stageId:$(button).attr('id'),
            grade: grade
        }

        $.ajax({
            type:"POST",
            url:"<%=basePath%>project_stage/edit",
            data:json,
            dataType:'json',
            success:function (data) {
                if(data["success"]==true){
                    window.location.reload();
                }else{
                    operateError(data["msg"]);
                }
            }
        });
    }
    //检查阶段的格式
    function checkStageFormats(button,grade) {
        if($(button).closest('tr').index()>0){
            var preCol = $(button).closest('tr').index();
            if($("tbody tr:eq("+preCol+") td:eq(2)").text()==null ||$("tbody tr:eq("+preCol+") td:eq(2)").text()==""){
                operateError("上一阶段尚未完成");
                return false;
            }
        }
        return true;
    }
    //检查分数的格式
    function checkGradeFormates(grade) {
        if(grade ==null || grade==""){
            operateError("分数不能为空");
            return false;
        }
        if(!(grade>=0 &&grade <=100)){
            operateError("分数应该为1-100的数字");
            return false;
        }
        return true;
    }
</script>
</body>
</html>
